<template>
    <div class="register-vue" :style="bg">
        <div class="container">
            <p class="title">WELCOME</p>
            <div class="input-c">
                <Input prefix="ios-contact" v-model="account" placeholder="用户名" clearable />
                <p class="error">{{accountError}}</p>
            </div>
            <div class="input-c">
                <Input type="password" v-model="pwd" prefix="md-lock" placeholder="密码" clearable/>
                <p class="error">{{pwdError1}}</p>
            </div>
            <div class="input-c">
                <Input type="password" v-model="pwd2" prefix="md-lock" placeholder="确认密码" clearable @on-blur="confirmPwd"/>
                <p class="error">{{pwdError2}}</p>
            </div>
            <div class="input-c">
                <Input type="password" v-model="phone" prefix="ios-phone-portrait" placeholder="手机号" clearable />
                <p class="error">{{pwdError3}}</p>
            </div>
            <div class="input-c" style="white-space: nowrap">
                <Input  v-model="verify" placeholder="验证码" clearable style="width:120px; float:left"/>
                <button class="ivu-btn ivu-btn-default"  @click="message1" style="width:75px; float:right; padding-left:0px">发送验证码</button>
                <br/>
                <p class="error">{{pwdError3}}</p>
            </div>
            <Button :loading="isShowLoading" class="submit" type="primary" @click="submit">注册</Button>
            <p class="account"><span @click="back">返回登陆界面</span></p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'register',
    data() {
        return {
            account: '',
            pwd: '',
            pwd2: '',
            phone: '',
            verify: '',
            bg: {},
            pwdError1: '',
            pwdError2: '',
            pwdError3: '',
            isShowLoading: false,
        }
    },
    created() {
        this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
    },
    methods: {
        confirmPwd() {
            if (this.pwd !== this.pwd2) {
                this.pwdError2 = '和之前输入的密码不一致'
            } else {
                this.pwdError2 = ''
            }
        },
        back() {
            this.$router.push({ path: this.redirect || '/login' })
        },
        async submit() {
            let success = '999'
            await fetch('http://localhost:5000/register', {
                method: 'post',
                body: JSON.stringify({
                    username: this.account,
                    password: this.pwd,
                    verify: this.verify,
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    success = res.result
                    this.judge(success)
                }
            )
        },
        judge(success) {
            if (success === 'success') {
                alert('注册成功')
            } else {
                this.accountError = '验证码错误'
            }
        },
        message1() {
            fetch('http://localhost:5000/getVerify', {
                method: 'post',
                body: JSON.stringify({
                    phone: this.phone,
                }),
                headers: { 'Content-Type': 'application/json' },
            })
        },
    },
}
</script>

<style scoped>
.register-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.register-vue .container {
    background: rgba(255, 255, 255, .5);
    width: 300px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
}
.register-vue .ivu-input {
    background-color: transparent;
    color: #fff;
    outline: #fff;
    border-color: #fff;
}
.register-vue ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, .8);
}
.register-vue :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, .8);
}
.register-vue ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, .8);
}
.register-vue :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, .8);
}
.register-vue .title {
    font-size: 16px;
    margin-bottom: 20px;
}
.register-vue .input-c {
    margin: auto;
    width: 200px;
}
.register-vue .error {
    color: red;
    text-align: left;
    margin: 5px auto;
    font-size: 12px;
    padding-left: 30px;
    height: 20px;
}
.register-vue .submit {
    width: 200px;
}
.register-vue .account {
    margin-top: 30px;
}
.register-vue .account span {
    cursor: pointer;
}
.register-vue .ivu-icon {
    color: #eee;
}
.register-vue .ivu-icon-ios-close-circle {
    color: #777;
}
</style>
